<template>
<p>{{ msg }}</p>
<button @click="msg = 'Welcome to Vue'">修改数据</button>
<button @click="msg = 'Hello World'">修改数据</button>
</template>
<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue';
const msg = ref('Hello Vue')

onBeforeMount(()=>{
    console.log('组件挂载之前')
})
onMounted(()=>{
    console.log("组件已经挂载")
})
onBeforeUpdate(()=>{
    console.log('组件修改之前')
})
onUpdated(()=>{
    console.log('组件已经修改')
})
</script>